import { Tabs } from '@aws-amplify/ui-react';
import { Example, ExampleCode } from '@/components/Example';
import { InlineFilter } from '@/components/InlineFilter';

### Styles

Amplify UI ships with a default [theme](/theming) that you can customize to match the look and feel of your project.

<InlineFilter filters={['angular']}>
Open your `angular.json` file, and add `node_modules/@aws-amplify/ui-angular/theme.css` to `styles` array in your `angular.json`. This array is located in `projects.<project-name>.architect.build.options`.

```json{2}
"styles": [
  "node_modules/@aws-amplify/ui-angular/theme.css",
  "src/styles.css"
],
```
</InlineFilter>

<InlineFilter filters={['react']}>

<Tabs.Container defaultValue="js">
  <Tabs.List>
    <Tabs.Item value="js">JS</Tabs.Item>
    <Tabs.Item value="css">CSS</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel value="js">

Modern bundlers like Create React App & Next.js allow you to import `.css` from within your `.js` files.
This may be `src/index.js`, `src/App.js`, `pages/_app.js`, or whatever your entry-point is.

```js
import '@aws-amplify/ui-react/styles.css';
```

  </Tabs.Panel>
  <Tabs.Panel value="css">

You can import `.css` from within your `.css` files using `@import`.
This may be `src/index.css`, `src/styles/styles.css`, or whatever your global stylesheet is.

```js
@import "@aws-amplify/ui-react/styles.css";
```

  </Tabs.Panel>
</Tabs.Container>

#### CSS Layers

[CSS Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) are a new feature of the CSS spec that make it easy to override styles without needing to use a higher specificity. This means you don't have to worry about making sure your CSS selectors are specific enough to override the CSS selectors in Amplify UI's styles. [Support for CSS Layers is pretty good](https://caniuse.com/mdn-css_at-rules_layer), but we are introducing this as an opt-in feature. All CSS files have a regular CSS file version and a version with CSS Layers. To use CSS Layers with the example above, you would change the imports to this:

<ExampleCode>
```jsx
import '@aws-amplify/ui-react/styles/reset.layer.css' // global CSS reset
import '@aws-amplify/ui-react/styles/base.layer.css' // base styling needed for Amplify UI
import '@aws-amplify/ui-react/styles/button.layer.css' // component specific styles
```
</ExampleCode>

You can also use this for the main CSS export, `'@aws-amplify/ui-react/styles.layer.css'`.

</InlineFilter>

<InlineFilter filters={['vue']}>
```js
import '@aws-amplify/ui-vue/styles.css';
```
</InlineFilter>

<InlineFilter filters={['svelte']}>
```js
import '@aws-amplify/ui-svelte/styles.css';
```
</InlineFilter>
